<template>
	<view class="box">
		<!-- 搜索 -->
		<u-sticky offset-top="0">
			<view class="bg">
				<view class="search">
					<u-search @change="onChange" v-model="searchKey" @clear="clear" @search="onSearch" placeholder="请输入客户电话/车牌" placeholder-color="#999999" :show-action="false" color="#999999">
					</u-search>
				</view>
			</view>
		</u-sticky>


		<view style="padding: 0 24rpx;margin-top: 20rpx;">
			<!-- 按时间筛选 -->
			<view class="choose flex flex-ai-c flex-jc-sb" @click="showsc = true">
				<view class="flex flex-ai-c">
					<view>
						<text style="font-size: 26rpx;margin-right: 15rpx;">
							<text v-if="selectedDate===oldTime">今天</text>
						</text>
						{{selectedDate}} 	星期{{weekText}}
					</view>
					
				</view>
				<view class="flex flex-ai-c">
					<view>全部{{totle}}辆</view>
					<view style="margin-left: 10rpx;">
						<u-icon name="arrow-down" size="22rpx" color="#333333"></u-icon>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list" v-for="(item,index) in list" :key='item.arriveId'>
				<view class="list-title flex flex-ai-c flex-jc-sb">
					<view><text v-if="item.arriveTime!=='0001-01-01T00:00:00'">{{returnTime(item.arriveTime)}}</text></view>
					<view style="font-size: 24rpx;font-weight: 500;" :class="'type-' + type">{{item.arriveStr}}
					</view>
				</view>
				<!-- 内容 -->
				<view class="list-mian">
					<view @click="goPage(item)">
						<view class="flex flex-ai-c title">
							<view>客户： </view>
							<view>{{item.userName}}</view>
							<view v-if="item.userMobile">{{item.userMobile | filterTel}}</view>
							<view v-else>{{item.userMobile}}</view>
							<view class="stock-up flex flex-ai-c flex-jc-c" v-if="item.isStock">已备货</view>
						</view>
						<view class="flex flex-ai-c title">
							<view>车型： </view>
							<view>{{item.carTypeName}}</view>
							<view>{{item.configurationName}}</view>
						</view>
						<view class="flex flex-ai-c title">
							<view>车牌： </view>
							<view>{{item.plateNumber}}</view>
						</view>
						<view class="flex flex-ai-c title"
							style="border-bottom: 2rpx solid #EEEEEE;padding-bottom: 14rpx;">
							<view>服务类型：</view>
							<view>{{item.serviceType | serviceTypes}}</view>
						</view>
					</view>

					<view class="flex flex-ai-c flex-jc-sa">
						<view class="flex flex-ai-c contact" @click="concat(item)">
							<view>
								<i-icon icon='iconxiaoxi1' type='multiple' size='35rpx'></i-icon>
							</view>
							<view style="margin-bottom: 7rpx;">联系买家</view>
						</view>
						<view class="flex flex-ai-c contact" @click="phone(item.userMobile)">
							<view>
								<i-icon icon='icondianhua' type='multiple' size='32rpx'></i-icon>
							</view>
							<view>致电买家</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" v-if="list.length!==0" @loadmore="more" margin-top="50" />
		<view style="position: relative;background-color: #F6F6F6;bottom: 22rpx;" v-if="list.length===0">
			<default-img msg="暂无列表数据"></default-img>
		</view>
		<view>
			<date-selector
			  :title="'选择日期'"
			  :showsc="showsc"
			  @confirmTime="confirmsc"
			  @closeTime="closeTime"
				:text='carNumber'
			></date-selector>
		</view>
	</view>
</template>

<script src='./bookingManagement.js'></script>

<style lang="scss">
	@import './bookingManagement.scss';
</style>
